<template>
	<view class="">
		<view v-if="isSelect" class="u-f-r edit">
			<view class="u-f-ajc" @click="allSelectAction">{{ isAllSelect?'取消全选':'全选'}}</view>
			<view class="u-f-c u-f-ajc" @click="deleteAction">
				<image class="icon" src="https://statics.xmcsrv.net/weixin/trash.png" mode=""></image>
				<text>删除</text>
			</view>
			<view class="u-f-c u-f-ajc" @click="shareAction">
				<image class="icon" src="https://statics.xmcsrv.net/weixin/share.png" mode=""></image>
				<text>分享</text>
			</view>
			<view class="u-f-ajc" @click="cancelAction">取消</view>
		</view>
		<view :style="{marginTop:isSelect?'160rpx':'0rpx'}">
			<view class="itemList" v-for="(item,index) in list" :key="index">
				<view class="time">{{item.date}}</view>
				<view class="u-f-wrap u-f-r items">
					<view class="img" v-for="(item2,index2) in item.items" :key="index2">
						<image src="https://statics.xmcsrv.net/weixin/logo.png" @longpress="longclick(index2)"></image>
						<view v-if="isSelect" class="select" @click="selectPicClick(item2)">
							<uni-icons v-if="!item2.selected" type="circle" color="#e5e5e5" size="30"></uni-icons>
							<uni-icons v-else type="checkbox" color="#FF0025" size="30"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-datetime-picker type="daterange" @change="chooseDate">
			<view class="u-f-ajc calendar">
				<uni-icons type="calendar" color="#2CBDB8" size="30"></uni-icons>
				<text>{{date?date:'日期选择'}}</text>
			</view>
		</uni-datetime-picker>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				mr10:'10rpx',
				list:[{date:'2022-06-08',items:[{id:0,selected:false},{id:1,selected:false},{id:2,selected:false}]},{date:'2022-06-10',items:[{id:3,selected:false},{id:4,selected:false},{id:5,selected:false},{id:6,selected:false},{id:7,selected:false}]}],
				date:'',
				isSelect:false, //是否长按
				isAllSelect:false, //是否全选
			}
		},
		onLoad() {
			
		},
		methods:{
			
			//长按图片
			longclick(index){
				this.list.forEach((item,i)=>{
					item.items.forEach((item2)=>{
						item2.selected = false
					})
				})
				this.isSelect = true
			},
			//选择图片
			selectPicClick(e){
				this.list.forEach((item,i)=>{
					item.items.forEach((item2)=>{
						if(item2.id == e.id){
							item2.selected = !item2.selected
						}
					})
				})
			},
			//全选
			allSelectAction(){
				this.isAllSelect = !this.isAllSelect
				this.list.forEach((item,i)=>{
					item.items.forEach((item2)=>{
						item2.selected = this.isAllSelect?true:false
					})
				})
				
			},
			// 删除
			deleteAction(){
				
			},
			// 分享
			shareAction(){
				
			},
			// 取消
			cancelAction(){
				this.isSelect = false
				this.list.forEach((item,i)=>{
					item.items.forEach((item2)=>{
						item2.selected = false
					})
				})
			},
			// 选中日期
			chooseDate(e){
				console.log(e);
				this.date = e[0] + "~" +e[1]
			},
			
		}
		
	}
</script>

<style lang="scss">
	page{
		background: white;
	}
	.edit{
		z-index: 10;
		position: fixed;
		left: 0;
		right: 0;
		top: 84rpx;
		color: #FF0025;
		font-size: 26rpx;
		font-weight: 500;
		border-bottom: 1px solid #DEDEDE;
		padding: 30rpx 0;
		background: white;
		view{
			flex: 1;
		}
		.icon{
			width: 50rpx;
			height: 50rpx;
			margin-bottom: 10rpx;
		}
	}
	.itemList{
		// margin-top: 160rpx;
		.time{
			font-size: 26rpx;
			height: 84rpx;
			line-height: 84rpx;
			color: #6B6B6B;
			margin-left: 30rpx;
		}
		.items{
			width: 100%;
			.img{
				position: relative;
				width: 33%;
				height: 181rpx;
				margin-top: 5rpx;
				background:orange;
				
				image{
					width: 100%;
					height:100%;
				}
				.select{
					position: absolute;
					right: 10rpx;
					top: 10rpx;
				}
			}
		}
		.items .img:not(:nth-child(3n)){
			margin-right: 0.5%;
		}
	}
	
	.calendar{
		height: 84rpx;
		background: white;
		border: 1rpx solid #B9B9B9;
		border-radius: 15rpx;
		position: fixed;
		bottom: 40rpx;
		left: 30rpx;
		right: 30rpx;
		color: #2CBDB8;
		text{
			margin-left: 10rpx;
		}
	}
</style>